
{{template "header" .}}

<div class="ibox float-e-margins" >
    <div class="row">
        <div class="col-lg-8"></div>
        <div class="col-lg-4"></div>

    </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>数据更新统计
                        </h5>

                        <div style="float: left; margin-top: -10px; margin-left: 10px">
                            <select class="form-control" name="DbName" id="DbName">
                                <option value="" > 数据源 </option>
                            {{range $i, $name := .DbList}}
                                <option value="{{$name}}"> {{$name}} </option>
                            {{end}}
                            </select>

                        </div>

                        <div style="float: left; margin-top: -10px; margin-left: 10px">
                            <select class="form-control" name="SchemaName" id="SchemaName">
                                <option value="" > 库 </option>
                            </select>

                        </div>

                        <div style="float: left; margin-top: -10px; margin-left: 10px">
                            <select class="form-control" name="TableName" id="TableName">
                                <option value="" > 表 </option>
                            </select>

                        </div>


                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>



                        <div class="ibox-tools" style="width: auto; padding-right:8px;">
							<select class="form-control" style=" margin-top:-8px;" id="selectLengthsAge">
                            	<option value="tenminute">10 分钟</option>
                            	<option value="hour">1 小时</option>
                                <option value="eighthour">8 小时</option>
                                <option value="day">24 小时</option>
                            </select>
                        </div>


                </div>
                    
                    <div class="ibox-content">
                        <div class="echarts" id="morris-line-chart"></div>
                    </div>
                </div>
            </div>
        </div>



</div>


{{template "footer" .}}

<script src="/js/echarts.min.js"></script>
<script src="/plugin/TableCount/www/flow.js"></script>
<script type="text/javascript">

    var flowObj = Object.create(FlowClass)
    flowObj.setCanvasId("morris-line-chart");
    flowObj.setAgetLength($("#selectLengthsAge").val());

	$(function(){
        $("#selectLengthsAge,#DbName,#SchemaName,#TableName").change(
                function(){
                    var DbName = $("#DbName").val();
                    var SchemaName = $("#SchemaName").val();
                    var TableName = $("#TableName").val();
                    var flowType = $("#selectLengthsAge").val();
                    flowObj.setDbName(DbName);
                    flowObj.setTableName(TableName);
                    flowObj.setSchema(SchemaName);
                    flowObj.setAgetLength(flowType);
                    flowObj.getFlowData();
                }
        );

        $("#DbName").change(
            function () {
                if ( $("#DbName").val() == ""){
                    return;
                }
                $.post(
                    "/bifrost/plugin/TableCount/flow/schema/list",
                    {
                        DbName: $("#DbName").val(),
                        SchemaName: $("#SchemaName").val()
                    },
                    function (d, status) {
                        if (status != "success") {
                            return false;
                        }
                        var html = "<option value=\"\" > 库 </option>";
                        for(var i in d){
                            html += "<option value=\""+d[i]+"\" > "+d[i]+" </option>";
                        }
                        $("#SchemaName").html(html);

                    }, 'json')
            }


        );

        $("#SchemaName").change(
            function () {
                if ($("#DbName").val() == ""){
                    return;
                }
                $.get(
                    "/bifrost/plugin/TableCount/flow/table/list",
                    {
                        DbName: $("#DbName").val(),
                        SchemaName: $("#SchemaName").val(),
                    },
                    function (d, status) {
                        if (status != "success") {
                            return false;
                        }
                        var html = "<option value=\"\" > 表 </option>";
                        for(var i in d){
                            html += "<option value=\""+d[i]+"\" > "+d[i]+" </option>";
                        }
                        $("#TableName").html(html);

                    }, 'json')
            }


        );
	});
	var IntervalFun = function () {
        flowObj.getFlowData();
    }

</script>

<script src="/js/timeInterval.js"></script>
